<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link rel="stylesheet" type="text/css" href="node_modules/bulma/css/bulma.css" />
    <link rel="stylesheet" type="text/css" href="./main.css" />
    <title>Electron MQTT</title>
  </head>
  <body>
    <div class="main">
      <div class="card connection">
        <header class="card-header">
          <h1 class="card-header-title">
            Connection
          </h1>
        </header>
        <div class="card-content">
          <form name="connection" class="content">
            <div class="columns">
              <div class="column">
                <label class="label">Host</label>
                <div class="control">
                  <input class="input" name="host" type="text" value="broker.emqx.io">
                </div>
              </div>
              <div class="column">
                <label class="label">Port</label>
                <div class="control">
                  <input class="input" name="port" type="text" value="1883" type="number">
                </div>
              </div>
              <div class="column">
                <label class="label">Client ID</label>
                <div class="control">
                  <input class="input" name="clientId" type="text" value="mqttjs_6dd84101">
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <label class="label">Username</label>
                <div class="control">
                  <input class="input" name="username" type="text">
                </div>
              </div>
              <div class="column">
                <label class="label">Password</label>
                <div class="control">
                  <input class="input" name="password" type="text">
                </div>
              </div>
              <div class="column">
                <div></div>
              </div>
            </div>
          </form>
        </div>
        <footer class="card-footer">
          <button id="connectBtn" class="card-footer-item button is-primary">Connect</button>
          <button id="disconnectBtn" class="card-footer-item button is-danger is-light">Disconnect</button>
        </footer>
      </div>
      <div class="mqtt-sub-pub columns">
        <div class="column">
          <div class="card subscriber">
            <header class="card-header">
              <p class="card-header-title">
                Subscriber
              </p>
            </header>
            <div class="card-content">
              <form name='subscriber' class="content">
                <div class="field">
                  <label class="label">Topic</label>
                  <div class="control">
                    <input name="topic" class="input" type="text" value="testtopic/electron">
                  </div>
                </div>
                <div class="field">
                  <label class="label">QoS</label>
                  <div class="control">
                    <div class="select">
                      <select name="qos">
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                      </select>
                    </div>
                  </div>
                </div>
              </form>
              <div class="field is-grouped">
                <p class="control">
                  <button id="subBtn" class="card-footer-item button is-primary">Subscribe</button>
                </p>
                <p class="control">
                  <button id="unsubBtn" class="card-footer-item button is-danger is-light">Unsubscribe</button>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="card publisher">
            <header class="card-header">
              <p class="card-header-title">
                Publisher
              </p>
            </header>
            <div class="card-content">
              <form name="publisher" class="content">
                <div class="field">
                  <label class="label">Topic</label>
                  <div class="control">
                    <input name="topic" class="input" type="text" value="testtopic/electron">
                  </div>
                </div>
                <div class="field">
                  <label class="label">QoS</label>
                  <div class="control">
                    <div class="select">
                      <select name="qos">
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="field">
                  <label class="label">Payload</label>
                  <div class="control">
                    <textarea name="payload" class="textarea" rows="2" placeholder="e.g. Electron connection demo...!"></textarea>
                  </div>
                </div>
              </form>
              <div class="field is-grouped">
                <p class="control">
                  <button id="sendBtn" class="card-footer-item button is-primary">Send</button>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="card receiver">
            <header class="card-header">
              <h1 class="card-header-title">
                Receiver
              </h1>
            </header>
            <div class="card-content">
              <div class="content">
                <article id="article" class="message is-success">
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./renderer.js"></script>
  </body>
</html>
